
// 轮播图

class Swiper {
    constructor(el) {
        this.el = el;
        this.oBanner = this.el.find(".banner2");
        this.oBfigure = this.el.find(".b-figure");
        // this.oImgList = this.el.find(".b-figure").children();
        this.oPoint = this.el.find(".point");
        // this.oPointList = this.el.find(".point").children()
        this.imgIndex = 0;
        this.pointIndex = 0;
        this.addLi()
        this.settimer()
        this.clickPoint()
    }
    addLi() {
        var str = ``;
        for (var i = 0; i < this.oBfigure.children().length; i++) {
            str += `
            <span class="pointlist"></span>
            `;
        }
        this.oPoint.html(str)
        this.oPoint.children().eq(0).addClass("point-active")
        this.oBfigure.children().eq(0).clone(true).appendTo(this.oBfigure);
        this.timer = setInterval(() => {
            this.imgIndex++
            this.pointIndex++
            this.autoPlay()
        }, 2500)
    }
    autoPlay() {
        if (this.imgIndex > 5) {
            this.imgIndex = 1;
            this.oBfigure.css({ left: "0px" })
        }
        this.oBfigure.stop().animate({ left: this.imgIndex * -1200 })
        if (this.pointIndex > 4) {
            this.pointIndex = 0;
        }
        this.oPoint.children().eq(this.pointIndex).addClass("point-active").siblings().removeClass("point-active")
    }
    settimer() {
        this.oBanner.on("mouseenter", () => {
            clearInterval(this.timer)
        }).on("mouseleave", () => {
            this.timer = setInterval(() => {
                this.imgIndex++
                this.pointIndex++
                this.autoPlay()
            }, 1500)
        })
    }
    clickPoint() {
        let self = this
        this.oPoint.children().on("click", function () {
            let index = $(this).index()
            self.imgIndex = self.pointIndex = index;
            self.autoPlay()
        })
    }
}
(function () {
    $.fn.extend({
        carouselFigure() {
            new Swiper(this)
        }
    })
})()

$(function () {
    $(".banner").carouselFigure()
})